<template>
  <a-form :form="form" @submit="handleSubmit" :labelCol="formItemLayout.labelCol" :wrapperCol="formItemLayout.wrapperCol">
    <a-form-item label="优惠券ID">
      <div class="flex-task">
        <a-input :disabled="disabled" placeholder="请输入优惠券ID" class="mr-20" v-decorator="[
        `awardId`,
        {
          rules: [
            {
              required: true,
              whitespace: true,
              message: '请输入优惠券ID',
            },
          ],
        },
      ]"></a-input>
      <a-button type="primary" :loading="btnLoading" @click="searchCoupon">搜索</a-button>
      </div>
    </a-form-item>
    <a-form-item  label="优惠券名称">
      <a-input :disabled="true" placeholder="请输入优惠券名称" v-decorator="[`name`]"></a-input>
    </a-form-item>
    <a-form-item  label="券类型">
      <a-input :disabled="true" placeholder="请输入券类型" v-decorator="[`vouType`]"></a-input>
    </a-form-item>

    <a-form-item  label="折扣" v-if="showDisCount">
      <a-input :disabled="true" placeholder="请输入券面值" v-decorator="[`discount`]"></a-input>
    </a-form-item>
    <a-form-item  label="券面值" v-else>
      <a-input :disabled="true" placeholder="请输入券面值" v-decorator="[`amtAccount`]"></a-input>
    </a-form-item>
    <a-form-item label="任务名称">
      <a-input :disabled="disabled" :maxLength="20" placeholder="请输入任务名称" v-decorator="[
        `taskName`,
        {
          rules: [
            {
              required: true,
              whitespace: true,
              message: '请输入任务名称',
            },
          ],
        },
      ]"></a-input>
    </a-form-item>
    <a-form-item label="任务开始时间">
      <a-date-picker :disabled="disabled" :locale="locale" v-decorator="[
        `taskStartTime`,
        {
          rules: [{ required: true, message: `请选择任务开始时间!` }]
        }
      ]" show-time :placeholder="`请选择任务开始时间`" valueFormat="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD HH:mm:ss" />
    </a-form-item>
    <a-form-item label="任务结束时间">
      <a-date-picker :disabled="disabled" :locale="locale" v-decorator="[
        `taskEndTime`,
        {
          rules: [{ required: true, message: `请选择任务结束时间!` }]
        }
      ]" show-time :placeholder="`请选择任务结束时间`" valueFormat="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD HH:mm:ss" />
    </a-form-item>
    <a-form-item :wrapperCol="offset">
      <a-button type="primary" @click="back" class="mr-20">取消</a-button>
      <a-button v-if="!disabled" :loading="loading" type="primary" html-type="submit">创建任务</a-button>
    </a-form-item>
  </a-form>
</template>

<script>
import { couponDetail,addCouponTask } from '@/api/marketingCenter/couponTask'
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
import dayjs from 'dayjs'
export default {
  name: '',
  props:{
    edit: {
      type:Object,
      default: null
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      locale,
      form: this.$form.createForm(this),
      formItemLayout: {
        labelCol: {
          xl: { span: 5 },
          xs: { span: 5 },
          sm: { span: 6 },
        },
        wrapperCol: {
          xl: { span: 8 },
          xs: { span: 12 },
          sm: { span: 12 },
        },
      },
      offset: {
        xl: { span: 8, offset: 5 },
        xs: { span: 12, offset: 5 },
        sm: { span: 12, offset: 6 },
      },
      loading: false,
      btnLoading: false,
      showDisCount: false
    }
  },
  components: {
  },
  mounted(){
    if(this.$props.edit){
      const { taskName, taskStartTime, taskEndTime, awardId, voucherName:name,voucherAmt:amtAccount,voucherType } = this.$props.edit
      this.showDisCount = voucherType !== 'VOU3'
      let data = {vouType: voucherType == 'VOU3' ? '代金券' : '折扣券',  name, taskName, taskStartTime, taskEndTime, awardId:String(awardId) }
      if(voucherType == 'VOU3'){
        data.amtAccount = amtAccount + '元'
      }else{
        data.discount = amtAccount + '折'
      }
      this.$nextTick(() => {
        this.form.setFieldsValue(data)
      })

    }
  },
  methods: {
    async searchCoupon(){
      const awardId = this.form.getFieldValue('awardId')
      if(!awardId){
        return this.$message.error('请输入优惠券ID')
      }
      this.btnLoading = true
      const res = await couponDetail({awardId})
      this.btnLoading = false
      console.log('优惠券详情',res)
      const { vouType, amtAccount, name, discount } = res.data
      if(!name){
        return this.$message.error('优惠券搜索失败')
      }
      this.showDisCount = vouType !== 'VOU3'
      let data = {vouType: vouType == 'VOU3' ? '代金券' : '折扣券',  name }
      if(vouType == 'VOU3'){
        data.amtAccount = amtAccount + '元'
      }else{
        data.discount = discount + '折'
      }
      this.$nextTick(() => {
        this.form.setFieldsValue(data)
      })
    },
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields(async (err, values) => {
        if (!err) {
          const { taskStartTime, taskEndTime} = values
          if(dayjs(taskEndTime).unix() < dayjs(taskStartTime).unix()) {
            return this.$message.error('任务结束时间不能小于开始时间')
          }
          const { realname:operatorName, workNo:operatorId } = this.$store.getters.userInfo
          let params = Object.assign(values, { operator:{ operatorName, operatorId } })
          // 编辑
          if(this.$props.edit){
            const { id, creator, workNo } = this.$props.edit
            params = Object.assign(params,{ id, creator, workNo })
          }else{
            params = Object.assign(params,{  creator: operatorName, workNo: operatorId })
          }
          this.loading = true
          const res = await addCouponTask(params)
          this.loading = false
          const { msg, code }= res
          if(code == 200){
            this.$message.success('任务创建成功')
            this.form.resetFields()
            this.$emit('close', 1)
          }else{
            this.$message.error(msg + '创建失败')
          }
        }
      });
    },
    back(){
      this.form.resetFields()
      this.$emit('close')
    }
  },
}
</script>

<style scoped>
.mr-20{
  margin-right: 20px;
}
.flex-task{
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
</style>
